<template>
  <div>
    <slot name="left"></slot>
    <template v-if="$attrs.value !== undefined">
      <vxe-button class="table-right-operation-but"
                  v-for="obj in $attrs.value"
                  :key="obj.code"
                  type="text"
                  :status="obj['status']"
                  :loading="bindLoading(obj, row)"
                  @click="handleOperationClick({row: row, obj: obj, setLoading: setLoading})">
        <i :class="obj['icon']"></i>{{ obj['name'] }}
      </vxe-button>
    </template>
    <slot name="right"></slot>
  </div>
</template>

<script>
export default {
  name: 'olTableOperate',
  props: {
    row: {
      required: true,
      type: Object
    }
  },
  data() {
    return {
      loading: {},
    };
  },
  computed: {
    bindLoading() {
      return (o, row) => {
        if (o.loading === 1) {
          if (this.loading[o.code + row._X_ROW_KEY] == undefined) {
            this.loading[o.code + row._X_ROW_KEY] = false;
          }
        }
        return this.loading[o.code + row._X_ROW_KEY];
      };
    }
  },
  methods: {
    setLoading(o, r, v) {
      this.$set(this.loading, o.code + r._X_ROW_KEY, v);
    },
    handleOperationClick(payload) {
      this.$emit('handleOperationClick', payload);
    }
  }
};
</script>

<style lang="less" scoped>
.table-right-operation-but {
  margin: 0;
}
</style>
